| ios 本地写入json文件 js写入本地json文件 | 您所在的位置：网站首页 › js img src能下载吗 › ios 本地写入json文件 js写入本地json文件 |
ios 本地写入json文件 js写入本地json文件
|
window.onload = function() {
//json文件的路径
var url = "js/test.json"
var request = new XMLHttpRequest();
//设置请求方法及路径
request.open("get", url);
//不将数据返回到服务器
request.send(null);
request.onload = function() { //XHR对象获取到返回信息后执行此函数
if (request.status == 200) { //返回状态为200，即为数据获取成功
var json = JSON.parse(request.responseText);
console.log(json);//查看获取到的json文件生成的对象
}
}
} ⬆⬆⬆这些是我在网上找的，我不会，但能满足我的需求就行😜 这时候json应该是加载过来了，但是直接在全局里console.log会发现报错了
这是因为json变量是在局部被声明的，想在全局中访问json得这样 var json window.onload = function() { var url = "js/test.json" var request = new XMLHttpRequest(); request.open("get", url); request.send(null); request.onload = function() { if (request.status == 200) { json = JSON.parse(request.responseText); } } } console.log(json);这样总算能访问到json了，但是这时候会发现json不是我想要的样子
json里的数据本来是要渲染页面的，明明拿到了，为什么会是undefined呢？ 其实他确实拿到了，只不过时间线有点问题，这里最后一行的console.log发生在浏览器读取到这一行代码的时候，而你给json赋值是在页面加载后（window.onload），还没给json赋值就要现在页面上打印他，当然只给你undefined啦 var json window.onload = function() { var url = "js/test.json" var request = new XMLHttpRequest(); request.open("get", url); request.send(null); request.onload = function() { if (request.status == 200) { json = JSON.parse(request.responseText); } } } setTimeout(function() { console.log(json); }, 1000)像这样给他加个定时器就行了 但是等一秒还是太慢，给json赋值后就开始不行吗？ 当然可以 Document var Box = document.getElementById("box") var json window.onload = function() { var url = "js/test.json" var request = new XMLHttpRequest(); request.open("get", url); request.send(null); request.onload = function() { if (request.status == 200) { json = JSON.parse(request.responseText); showData(json) } } } function showData(data) { for (let i = 0; i < json.games.length; i++) { var gameName = json.games[i].name console.log(gameName); var p = document.createElement("p") p.innerHTML = gameName Box.appendChild(p) } }showData是我要用json进行的事件，那么只需要在json被赋值后运行这个事件就可以了，把json当作一个参数传进去就可以啦
附上一直被我拿来搞的test.json（爬4399的数据的一部分🤫） { "games": [{ "name": "玛雅奇遇记", "img": "http://imga4.5054399.com/upload_pic/2019/12/26/4399_16594503290.jpg" }, { "name": "超进化", "img": "http://imga4.5054399.com/upload_pic/2016/6/14/4399_09394759462.jpg" }, { "name": "大头部落之战中文版", "img": "http://imga4.5054399.com/upload_pic/2016/5/19/4399_13442624802.jpg" }] }
|
【本文地址】
公司简介
联系我们
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |